<template>
  <view>
    <u-navbar :background="background" title="Rococo" is-fixed="true" :border-bottom="false" :is-back="false" z-index="9999"></u-navbar>
    <view class="box">
      <image src="https://typora-licodeao.oss-cn-guangzhou.aliyuncs.com/typoraImg/toSignUp.webp" class="img"></image>
      <view v-if="user.openId" class="name">
        <view class="nameText">
          Hello, {{name}} ! 
        </view>
        <view class="waitText">
          请等待约2s...
        </view>
      </view>
      <u-button type="primary" size="default" @click="getUser" v-else>请先登录</u-button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        background: {
          backgroundColor: '#FFFFFF'
        },
        name: "",
        user: {
          openId: ""
        }
      }
    },
    methods: {
      getUser() {
        let that = this
        wx.getUserProfile({
          desc: '报名表收集',
          success(res) {
            console.log(res)
            that.name = res.userInfo.nickName
            wx.login({
              success(res) {
                console.log(res)
                if (res.code) {
                  wx.request({
                    url: 'https://www.lingche.net.cn:9223/user/getOpenId',
                    method: 'GET',
                    data: {
                      "code": res.code
                    },
                    success(res) {
                      console.log(res)
                      that.user.openId = res.data.message
                      if (res.data.code === 200) {
                        uni.showToast({
                          icon: 'success',
                          title: '登录成功',
                          duration: 1000
                        })
                      }
                      let item = encodeURIComponent(JSON.stringify(that.user))
                      setTimeout(() => {
                        uni.navigateTo({
                          url: `../../subpkg/signUp/signUp?item=${item}`
                        })
                      }, 1500)
                    }
                  })
                }
              }
            })
          }
        })
      }
    }
  }
</script>

<style>
  page {
    background-color: #FFFFFF;
  }
  
  .box {
    width: 95%;
    height: 450px;
    margin: 100px auto;
  }
  
  .img {
    width: 100%;
    margin: 0 auto;
  }
  
  .name {
    font-size: 25px;
    width: 90%;
    margin: 10px auto;
  }
  
  .nameText {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0 auto;
  }
  
  .waitText {
    width: 80%;
    text-align: center;
    margin: 10px auto;
  }
</style>
